<%= form_for(Settings::General.new,
             url: admin_settings_general_settings_path,
             html: { data: {
               action: "submit->config#updateConfigurationSettings",
               testid: "mascotSectionForm"
             } }) do |f| %>
  <details class="crayons-card">
    <summary class="crayons-subtitle-2 p-6">Mascot</summary>
    <div class="p-6 pt-0">
      <fieldset class="grid gap-4">
        <div class="crayons-field">
          <%= admin_config_label :mascot_user_id, "Mascot user" %>
          <%= admin_config_description Constants::Settings::General.details[:mascot_user_id][:description] %>
          <%= f.text_field :mascot_user_id,
                           class: "crayons-textfield js-username_id_input",
                           value: Settings::General.mascot_user_id,
                           min: 1,
                           placeholder: Constants::Settings::General.details[:mascot_user_id][:placeholder] %>
        </div>

        <div class="crayons-field">
          <%= admin_config_label :mascot_image_url, "Mascot Image URL" %>
          <%= admin_config_description Constants::Settings::General.details[:mascot_image_url][:description] %>
          <%= f.text_field :mascot_image_url,
                           class: "crayons-textfield",
                           value: Settings::General.mascot_image_url,
                           placeholder: Constants::Settings::General.details[:mascot_image_url][:placeholder] %>

          <div class="w-100 max-w-100 px-4">
            <img alt="Mascot image" class="max-w-100 h-auto" src="<%= Settings::General.mascot_image_url %>" loading="lazy" />
          </div>

        </div>
      </fieldset>
      <%= render "update_setting_button", f: f %>
    </div>
  </details>
<% end %>
